<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程管理</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../ep/static/js/vue.js"></script>
    <!--  引入element组件库 -->
    <script src="../ep/static/js/element.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="../ep/static/elementui/theme-chalk/index.css">
    <script src="../ep/static/js/axios.js"></script>

</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">直播管理</div>
        </el-col>
    </el-row><br>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple">
                <el-row>

                    <el-card class="box-card">
                        <div slot="header" class="clearfix">

                            <center><span>单场直播</span></center>
                        </div>
                        <div>
                            <center>支持普通和三分屏直播，匹配授课需求</center><br>
                            <center>直播方式：网页直播/PC客户端</center><br>
                            <center>
                                <el-button type="primary" @click="dialogFormVisible = true">立即创建</el-button>
                            </center>
                        </div>
                    </el-card>

                </el-row>
            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple-light">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">

                        <center> <span>直播课程</span></center>
                    </div>
                    <div>
                        <center>支持关联多个直播，匹配课程需求</center>
                        <br>

                        <center> 直播方式：网页直播/PC客户端</center><br>
                        <center>
                            <el-button type="primary" @click="dialogFormVisible = true">立即创建</el-button>
                        </center>
                    </div>
                </el-card>
            </div>
        </el-col>
    </el-row><br>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple">

            </div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content bg-purple-light"></div>
        </el-col>
    </el-row><br>
    <el-row>
        <!-- 名字搜索框  -->
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <el-input v-model="input" placeholder="请输入直播名称" style="width: 300px;"></el-input>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple-light">

                <el-select v-model="value" placeholder="请选择直播类型">
                    <el-option v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </div>
        </el-col>
        <!-- 时间搜索框 -->
        <el-col :span="6">
            <div class="grid-content bg-purple-light">
                <el-select v-model="value1" placeholder="请选择直播状态">
                    <el-option v-for="item in options1"
                               :key="item.value1"
                               :label="item.label1"
                               :value="item.value1">
                    </el-option>
                </el-select>
            </div>
        </el-col>

        <!-- 按钮 -->
        <el-col :span="6">
            <div class="grid-content bg-purple">
                <el-row>
                    <el-button type="primary" round @click="find()">查询</el-button>
                    <el-button type="primary" round @click="black()">重置</el-button>
                </el-row>
            </div>
        </el-col>
    </el-row><br>

    <el-row>
        <!-- 表格 -->
        <el-col :span="24">
            <div class="grid-content bg-purple-dark">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="ltype" label="直播类型" width="180">
                        <template scope="scope">
                            <p v-if="scope.row.ltype==1">单场直播</p>
                            <p v-if="scope.row.ltype==2">直播课程</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="liveName" label="直播名称" width="180">
                    </el-table-column>
                    <el-table-column prop="teacherName" label="讲师" width="180">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="直播状态" width="180">
                        <template scope="scope">
                            <p v-if="scope.row.status==1">未开始</p>
                            <p v-if="scope.row.status==2">直播中</p>
                            <p v-if="scope.row.status>=3">已结束</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="change(scope.row,scope.$index)" type="text" size="small">修改直播状态</el-button>
                            <el-button type="text" size="small" @click="del(scope.row,scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-size="size"
                               layout="total, prev, pager, next, jumper"
                               :total="total">
                </el-pagination>
            </div>

        </el-col>

    </el-row>



    <el-dialog title="创建直播" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="直播名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="讲师" prop="region">
                <el-select v-model="teacher" placeholder="请选择">
                    <el-option
                            v-for="item in ruleForm.teacherOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="直播场景" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="1" >单场直播</el-radio>
                    <el-radio label="2" >直播课程</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="直播简介" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item label="开播时间" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="datetime" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</div>
</body>
<script type="text/javascript">
   let element = new Vue({
        el: "#app",
        data: {
            teacher:'',
            value: "",
            total:'',
            input:"",
            size:10,
            project:"",
            subject:"",
            subjectOptions:[],
            currentPage: 1,
            tableData: [],
            options: [{
                value: '',
                label: '所有'

            }, {
                value: 2,
                label: '直播中'
            }, {
                value: 1,
                label: '未开始'
            }, {
                value: 3,
                label: '已结束'
            }],
            options1:[{
                value1: '',
                label1: '所有'

            }, {
                value1: 1,
                label1: '单场直播'
            }, {
                value1: 2,
                label1: '直播课程'
            }],
            value: '',
            value1:'',
            dialogTableVisible: false,
            dialogFormVisible: false,
            ruleForm: {
                name: '',
                region: '',
                teacherOptions:[],
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [{
                    required: true,
                    message: '请输入直播名称',
                    trigger: 'blur'
                },
                    {
                        min: 2,
                        max: 10,
                        message: '长度在 2 到 10 个字符',
                        trigger: 'blur'
                    }
                ],

                date1: [{
                    type: 'date',
                    required: true,
                    message: '请选择日期',
                    trigger: 'change'
                }],
                date2: [{
                    type: 'date',
                    required: true,
                    message: '请选择时间',
                    trigger: 'change'
                }],
                type: [{
                    type: 'array',
                    required: true,
                    message: '请至少选择一个活动性质',
                    trigger: 'change'
                }],
                resource: [{
                    required: true,
                    message: '请选择直播场景',
                    trigger: 'change'
                }],
                desc: [{
                    required: true,
                    message: '请填写直播简介',
                    trigger: 'blur'
                }]
            }

        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        axios.get('live/more', {
                            params: {
                                liveName:element.$data.ruleForm.name,
                                createTime:element.$data.ruleForm.date1,
                                teacherName:element.$data.teacher,
                                ltype:element.$data.ruleForm.resource
                            }
                        })
                            .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                                // console.log(res.data.data.data);
                                // this.total = res.data.data.total;
                                // this.tableData = res.data.data.data;
                                alert('新建成功');
                                location.reload()
                            })
                            .catch(error => {
                                console.log(error);
                            });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            find:function () {
                console.log(element.$data.value)
                console.log(element.$data.value1)
                console.log(element.$data.input)
                axios.get('live/find',{
                    params: {
                        liveName:element.$data.input,
                        status:element.$data.value,
                        type:element.$data.value1
                    }
                })
                    .then(function (res) {
                        console.log(res.data)
                        element.$data.total=res.data.length
                        element.$data.tableData=res.data;
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            black:function () {
                element.$data.input=""
                element.$data.value=""
                element.$data.value1=""
            },
            change:function (row,index) {
                this.$confirm('此操作将永久改变该状态, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'GET',
                        url: 'live/change?status=' + row.status+'&id='+row.id,
                    }).then(res => {
                        alert("修改成功");
                        location.reload();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改状态'
                    });
                });
            },
            del(row, index) { //删除
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'DELETE',
                        url: 'live/del?id=' + row.id,
                    }).then(res => {
                        alert("删除成功");
                        location.reload();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }

    })
    axios.get('live/findAll')
        .then(function (res) {
            console.log(res.data)
            element.$data.total=res.data.length
            element.$data.tableData=res.data;

        })
        .catch(function (error) {
            console.log(error)
        })
   axios.get("live/getTeacher")
       .then(function (res) {
           console.log(res.data)
           let projs = res.data
           for(let i=0; i<projs.length; i++){
               let proj = {
                   value:projs[i],
                   label:projs[i]
               }
               element.$data.ruleForm.teacherOptions.push(proj)
           }
       })
</script>
</html>
